<template>
  <div class="div-big">
    <div class="div-one">
      <p>2020-11-30 00:00:00结束</p>
      <p>{{countDownList}}</p>
    </div>
    <div class="div-box">
      <li class="li-one">票数排行榜</li>
      <ul class="ul-box">
        <li>
          <p>NO.2</p>
          <img src="/static/images/1.jfif" alt />
          <p>索罗</p>
          <p>1515票</p>
        </li>
        <li class="li-top">
          <img src="/static/images/2.png" alt />
          <img src="/static/images/3.jfif" alt />
          <p>路飞</p>
          <p>1515票</p>
        </li>
        <li>
          <p>NO.3</p>
          <img src="/static/images/2.jfif" alt />
          <p>山治</p>
          <p>1515票</p>
        </li>
      </ul>
      <ul>
        <li class="li-f" v-for="(item,index) in contentList" :key="index">
          <a>
            <img :src="item.url" alt />
            <p>
              <span>{{item.name}}</span>
              <span>{{item.num}}票</span>
            </p>
          </a>
          <p>{{index+3}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      countDownList: "00天00时00分00秒",
      actEndTime: "2020-11-30 00:00:00",
      contentList: [
        {
          url: "/static/images/1.jfif",
          name: "索罗",
          num: 123
        },
        {
          url: "/static/images/3.jfif",
          name: "路飞",
          num: 12345
        },
        {
          url: "/static/images/2.jfif",
          name: "山治",
          num: 12356
        },
        {
          url: "/static/images/1.jfif",
          name: "索罗",
          num: 123
        },
        {
          url: "/static/images/3.jfif",
          name: "路飞",
          num: 12345
        },
        {
          url: "/static/images/2.jfif",
          name: "山治",
          num: 12356
        }
      ]
    };
  },
  computed: {},
  created() {
    this.countDown();
  },
  mounted() {},
  watch: {},
  methods: {
    timeFormat(param) {
      return param < 10 ? "0" + param : param;
    },
    countDown(it) {
      var interval = setInterval(() => {
        // 获取当前时间，同时得到活动结束时间数组
        let newTime = new Date().getTime(); // 对结束时间进行处理渲染到页面
        let endTime = new Date(this.actEndTime).getTime();
        let obj = null; // 如果活动未结束，对时间进行处理
        if (endTime - newTime > 0) {
          let time = (endTime - newTime) / 1000; // 获取天、时、分、秒
          let day = parseInt(time / (60 * 60 * 24));
          let hou = parseInt((time % (60 * 60 * 24)) / 3600);
          let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
          let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
          obj = {
            day: this.timeFormat(day),
            hou: this.timeFormat(hou),
            min: this.timeFormat(min),
            sec: this.timeFormat(sec)
          };
        } else {
          // 活动已结束，全部设置为'00'
          obj = {
            day: "00",
            hou: "00",
            min: "00",
            sec: "00"
          };
          clearInterval(interval);
        }
        this.countDownList =
          obj.day + "天" + obj.hou + "时" + obj.min + "分" + obj.sec + "秒";
      }, 1000);
    }
  },
  components: {}
};
</script>

<style scoped>
.div-big {
  background-color: thistle;
  /* height: 800px; */
}
.div-one {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  font-size: 13px;
  color: rgb(104, 104, 104);
}
.div-box {
  width: 90%;
  margin: auto;
  background-color: white;
  /* height: 700px; */
}
.li-one {
  width: 100%;
  height: 40px;
  background-color: turquoise;
  text-align: center;
  line-height: 40px;
  color: white;
  font-weight: 600;
}
.ul-box {
  display: flex;
  justify-content: space-around;
}
.ul-box li {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ul-box li img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.ul-box li:nth-child(1) {
  padding-top: 18px;
}
.ul-box li:nth-child(2) {
  padding-top: 10px;
}
.ul-box li:nth-child(3) {
  padding-top: 20px;
}
.ul-box li p:nth-child(1) {
  color: yellow;
  font-weight: 600;
}
.ul-box li p:nth-child(3) {
  color: rgb(156, 156, 156);
  font-size: 14px;
}
.ul-box li p:nth-child(4) {
  color: #2bc1a9;
  font-weight: 600;
}
.li-top img:nth-child(1) {
  width: 50px;
  height: 20px;
  border-radius: 0px;
  /* margin-bottom: 10px; */
}
.li-f {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 25px;
  height: 70px;
  border-top: 1px solid rgb(121, 121, 121);
  color: rgb(179, 179, 179);
}
.li-f a {
  display: flex;
  margin-left: 10px;
}
.li-f a p {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.li-f img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>
